<template>
	<view>
		<el-tabs v-model="activeName" type="border-card" @tab-click="handleClick" style="width: 100%">
			<el-tab-pane label="合同信息" name="first" width="50rpx">
				<view class="contractDetail">
					<table style="width: 470px;">
						<tr style="background-color: silver;">
							<h3 style="margin-top: 6px;">客户信息</h3>
						</tr>
						<tr>
							<td class="key">合同编号</td>
							<td>{{ contract.code }}</td>
						</tr>
						<tr>
							<td class="key">合同名称</td>
							<td>{{ contract.name }}</td>
						</tr>
						<tr>
							<td class="key">合同金额</td>
							<td>{{ contract.amount }}</td>
						</tr>
						<tr>
							<td class="key">合同状态</td>
							<td>{{ contract.status }}</td>
						</tr>
						<tr>
							<td class="key">合同类型</td>
							<td>{{ contract.category }}</td>
						</tr>
						<tr>
							<td class="key">合同文件</td>
							<td>{{ contract.file }}</td>
						</tr>
						<tr>
							<td class="key">关联产品</td>
							<td>{{ contract.relatedProduct }}</td>
						</tr>
						<tr style="background-color: silver;">
							<h3 style="margin-top: 6px;">付款信息</h3>
						</tr>
						<tr>
							<td class="key">签订人</td>
							<td>{{ contract.signedPerson }}</td>
						</tr>
						<tr>
							<td class="key">签订时间</td>
							<td>{{ contract.signedTime }}</td>
						</tr>
						<tr>
							<td class="key">到期时间</td>
							<td>{{ contract.expireTime }}</td>
						</tr>
						<tr>
							<td class="key">付款方式</td>
							<td>{{ contract.paymentWay }}</td>
						</tr>
						<tr>
							<td class="key">预付款</td>
							<td>{{ contract.advanceCharge }}</td>
						</tr>
						<tr>
							<td class="key">备注</td>
							<td>{{ contract.note }}</td>
						</tr>
					</table>
				</view>
			</el-tab-pane>
			<el-tab-pane label="回款信息" name="second" width="50rpx">
				<tr style="background-color: silver;">
					<h3 style="margin-top: 6px;">回款计划</h3>
				</tr>
				<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
					<li v-for="remittanceitem in contract.remittances" class="infinite-list-item" i>
						<el-card shadow="always" style="height: 100%;width: 400px;margin-bottom: 10px;">
							<view class="remittance">
								<table style="width: 400px;">
									回款方式：{{remittanceitem.remittanceWay}}
									<tr>
										<td>回款金额：{{remittanceitem.amount}}</td>
										<td>提醒时间：前一天</td>
									</tr>
									<tr>
										<td>回款比例：{{remittanceitem.remittanceRate}}</td>
										<td>计划回款时间：{{remittanceitem.plannedPaymentTime}}</td>
									</tr>
								</table>
							</view>
						</el-card>
					</li>
				</ul>
				<tr style="background-color: silver;">
					<h3 style="margin-top: 6px;">已回款</h3>
				</tr>
				<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
					<li v-for="haveremittanceitem in contract.haveremittances" class="infinite-list-item" i>
						<el-card shadow="always" style="height: 100%;width: 400px;margin-bottom: 10px;">
							<view class="remittance">
								<table style="width: 400px;">
									回款方式：{{haveremittanceitem.remittanceWay}}
									<tr>
										<td>回款金额：{{haveremittanceitem.amount}}</td>
										<td>提醒时间：前一天</td>
									</tr>
									<tr>
										<td>回款比例：{{haveremittanceitem.remittanceRate}}</td>
										<td>计划回款时间：{{haveremittanceitem.plannedPaymentTime}}</td>
									</tr>
									收款人：{{haveremittanceitem.remittanceRate}}
									<tr>
										<td>逾期天数：{{haveremittanceitem.overdueDays}}</td>
										<td>备注：{{haveremittanceitem.plannedPaymentTime}}</td>
									</tr>
								</table>
							</view>
						</el-card>
					</li>
				</ul>
			</el-tab-pane>
			<view style="height: 60px;"></view>
		</el-tabs>
		<view class="option" style="height: 60px;">
			<table style="height: 100%; width: 500px; background-color: gainsboro; margin: auto;">
				<tr style="margin: auto;">
					<td>
						<view @click="addremittance()">
							回款
						</view>
					</td>
					<td>
						<view @click="updateContractInfo()">
							编辑
						</view>
					</td>
					<td>
						<view @click="dissolveRelation()">
							废除
						</view>
					</td>
					<td>
						<view @click="back()">
							返回
						</view>
					</td>
				</tr>
			</table>
		</view>
	</view>
</template>


<script>
	export default {
		data() {
			return {
				activeName: 'first',
				contractId: 0,
				contract: {}
			}
		},
		onLoad(options) {
			this.userId = uni.getStorageSync('id')
			this.contractId = options.contractId;
			console.log(this.userId + ' ' + this.contractId);
			// 获取合同详细信息
			uni.request({
				url: 'http://localhost:8089/crmdemo/contract/queryContractInfoById', //仅为示例，并非真实接口地址。
				data: {
					contractId: this.contractId
				},
				success: (res) => {
					console.log(res);
					if (res.data.status == "000000") {
						this.contract = res.data.result
					} else {
						this.$modal.msgError("获取合同详细信息失败")
					}
				}
			});
		},
		methods: {
			addremittance() {
				uni.reLaunch({
					url: 'addRemittance?customId=' + this.contract.customId
				})
			},
			updateContractInfo() {
				uni.reLaunch({
					url: 'updateContractInfo?contractId=' + this.contractId
				})
			},
			dissolveRelation() {
				uni.showModal({
					title: '解除关系',
					content: '您确认与该客户解除关系吗？',
					success: (ress) => {
						if (ress.confirm) {
							console.log(this.contract.userId+' '+this.contract.customId)
							// 解除关系
							uni.request({
								url: 'http://localhost:8089/crmdemo/custom/dissolveRelation', //仅为示例，并非真实接口地址。
								data: {
									userId: this.contract.userId,
									customId: this.contract.customId
								},
								success: (res) => {
									console.log(res);
									if (res.data.status == "000000") {
										uni.showToast({
											title: "解除关系成功",
											duration: 2000
										})
										setTimeout(() => {
											uni.reLaunch({
												url: '/pages/work/index'
											})
										}, 2000)
									} else {
										this.$modal.msgError("解除关系失败")
									}
								},
								
							});
						}
					}
				});
			},
			back() {
				uni.reLaunch({
					url: '/pages/work/index?userId=' + this.userId
				})
			}
		}
	}
</script>


<style>
	.key {
		color: cadetblue;
	}

	ul {
		list-style: none;
	}

	li {
		margin-right: 50px;
	}

	table {
		width: 340px;
	}

	td {
		width: 120px;
		text-align-last: left;
		border-bottom: 1px solid silver;
		padding: 8px;
	}

	tr {
		height: 35px;
		width: 150px;
		padding: 8px;
	}

	.option {
		position: fixed;
		bottom: 0;
	}
</style>